﻿function Canvas() {
    this.init.apply(this, arguments)
}
function convertBase64UrlToBlob(a) {
    var e, b = window.atob(a.split(",")[1]),
    c = new ArrayBuffer(b.length),
    d = new Uint8Array(c);
    for (e = 0; e < b.length; e++) d[e] = b.charCodeAt(e);
    return new Blob([c], {
        type: "image/jpeg"
    })
}
var doc = document,
canvas = doc.getElementById("canvas"),
brushDiv = doc.getElementById("canvas-brush"),
controlDiv = doc.getElementById("canvas-control");
Canvas.prototype = {
    preDrawAry: [],
    nextDrawAry: [],
    middleAry: [],
    confing: {
        lineWidth: 1,
        lineColor: "#ff9900",
        shadowBlur: 2
    },
    init: function(a, b, c) {
        this.canvas = a,
        this.context = a.getContext("2d"),
        this.brushDiv = b,
        this.controlDiv = c,
        this._initDraw(),
        this._draw(a),
        this.setColorPicker(),
        this.setBrush(),
        this.preClick(),
        this.nextClick(),
        this.clearClick()
    },
    _initDraw: function() {
        var a = this.context.getImageData(0, 0, 600, 400);
        this.middleAry.push(a)
    },
    _draw: function(a) {
        var c = this;
        a.onmousedown = function(b) {
            var j, d = b.clientX,
            e = b.clientY,
            f = this.parentNode.offsetLeft,
            g = this.parentNode.offsetTop,
            h = d - f,
            i = e - g;
            c._setCanvasStyle(),
            c.context.beginPath(),
            c.context.moveTo(h, i),
            j = c.context.getImageData(0, 0, 600, 400),
            c.preDrawAry.push(j),
            document.onmousemove = function(b) {
                var d = b.clientX,
                e = b.clientY,
                h = b.target,
                i = d - f,
                j = e - g;
                h == a ? (c.context.lineTo(i, j), c.context.stroke()) : c.context.beginPath()
            },
            document.onmouseup = function(b) {
                var e, d = b.target;
                d == a && (e = c.context.getImageData(0, 0, 600, 400), 0 == c.nextDrawAry.length ? c.middleAry.push(e) : (c.middleAry = [], c.middleAry = c.middleAry.concat(c.preDrawAry), c.middleAry.push(e), c.nextDrawAry = [], $(".js-next-control").addClass("next-control"), $(".next-control").removeClass("js-next-control")), c._isDraw()),
                this.onmousemove = null
            }
        }
    },
    _setCanvasStyle: function() {
        this.context.lineWidth = this.confing.lineWidth,
        this.context.shadowBlur = this.confing.shadowBlur,
        this.context.shadowColor = this.confing.lineColor,
        this.context.strokeStyle = this.confing.lineColor
    },
    setColorPicker: function() {
        $("#picker").colpick({
            layout: "hex",
            submit: 0,
            flat: !0,
            color: "#ff9900",
            onChange: this.bind(this, this.ColorPickerOnChange)
        })
    },
    ColorPickerOnChange: function(a, b) {
        this.confing.lineColor = "#" + b,
        $("#div_color").css("background-color", "#" + b)
    },
    setBrush: function() {
        this.brushDiv.onclick = this.bind(this, this._setBrush)
    },
    _setBrush: function(a) {
        var b = a.target;
        "span" == b.nodeName.toLowerCase() && (b.className.indexOf("small-brush") >= 0 ? this.confing.lineWidth = 1 : b.className.indexOf("middle-brush") >= 0 ? this.confing.lineWidth = 3 : b.className.indexOf("big-brush") >= 0 && (this.confing.lineWidth = 9), $(".js-bg-color").removeClass("js-bg-color"), $(b).addClass("js-bg-color"))
    },
    _isDraw: function() {
        return this.preDrawAry.length ? ($(".return-control").addClass("js-return-control"), $(".return-control").removeClass("return-control"), $(".empty-control").addClass("js-empty-control"), $(".empty-control").removeClass("empty-control"), void 0) : !1
    },
    preClick: function() {
        var a = this.controlDiv.getElementsByTagName("span")[0];
        a.onclick = this.bind(this, this._preClick)
    },
    _preClick: function() {
        var a, b;
        this.preDrawAry.length > 0 && (a = this.preDrawAry.pop(), b = this.middleAry[this.preDrawAry.length + 1], this.nextDrawAry.push(b), this.context.putImageData(a, 0, 0)),
        this.nextDrawAry.length && ($(".next-control").addClass("js-next-control"), $(".next-control").removeClass("next-control")),
        0 == this.preDrawAry.length && ($(".js-return-control").addClass("return-control"), $(".return-control").removeClass("js-return-control"))
    },
    nextClick: function() {
        var a = this.controlDiv.getElementsByTagName("span")[1];
        a.onclick = this.bind(this, this._nextClick)
    },
    _nextClick: function() {
        var a, b;
        this.nextDrawAry.length && (a = this.nextDrawAry.pop(), b = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2], this.preDrawAry.push(b), this.context.putImageData(a, 0, 0)),
        this.preDrawAry.length && ($(".return-control").addClass("js-return-control"), $(".return-control").removeClass("return-control")),
        0 == this.nextDrawAry.length && ($(".js-next-control").addClass("next-control"), $(".next-control").removeClass("js-next-control"))
    },
    clearClick: function() {
        var a = this.controlDiv.getElementsByTagName("span")[2];
        a.onclick = this.bind(this, this._clearClick)
    },
    _clearClick: function() {
        this.middleAry[0],
        this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height),
        this.preDrawAry = [],
        this.nextDrawAry = [],
        this.middleAry = [this.middleAry[0]],
        this.controlDiv.getElementsByTagName("span")[0].className = "return-control",
        this.controlDiv.getElementsByTagName("span")[1].className = "next-control",
        this.controlDiv.getElementsByTagName("span")[2].className = "empty-control"
    },
    bind: function(a, b) {
        return function() {
            return b.apply(a, arguments)
        }
    }
},
new Canvas(canvas, brushDiv, controlDiv, imgDiv),
$("#div_color").click(function() {
    $("#picker").show()
}),
$("#canvas-drawImage").click(function() {
    var a = canvas.toDataURL("image/png");
    parent.result_doodle(a)
}),
window.onmousedown = function() {
    var a = window.event,
    b = a.target.className; - 1 == b.indexOf("colpick") && $("#picker").hide()
};